<template>
  <div class="userTools">
    <div class="item" v-for="item in tools" :class="item.line?'line':''">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";

let tools = reactive([
  {
    name: '设置备注和标签',
    line: false
  },
  {
    name: '设置朋友圈权限',
    line: true
  },
  {
    name: '把他推荐给朋友',
    line: true
  },
  {
    name: '设为星标朋友',
    line: true
  },
  {
    name: '加入黑名单',
    line: true
  },
  {
    name: '删除联系人',
    line: false
  }
])
</script>


<style scoped lang="scss">
.userTools {
  background: #fff;
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

  .item {
    line-height: 34px;
    padding: 0 16px;
    cursor: pointer;
    font-size: 14px;
  }
  .item:hover{
    background: #eee;
  }

  .line {
    border-bottom: 1px solid #ccc;
  }
}
</style>